<template>
  <div id="login_app">
        <div class="login_card">
                <h3>生死簿后台管理</h3>

                <!-- 表单 -->
  <el-form :model="LoginForm"  :rules="rules" ref="LoginFormRef">
  <el-form-item prop="username">
    <el-input placeholder="用户名" v-model="LoginForm.username">
    <template slot="prepend">
      <i class="el-icon-user-solid"></i>
    </template>
  </el-input>
  </el-form-item>
  <el-form-item prop="password">
     <el-input type="password" placeholder="密码" v-model="LoginForm.password">
    <template slot="prepend">
      <i class="el-icon-lock"></i>
    </template>
  </el-input>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="submitForm('LoginFormRef')">提交</el-button>
   
  </el-form-item>
</el-form>
        </div>
  </div>
</template>

<script>
import '../../build/css/login.css'

export default {
        data() {
      return {
        LoginForm: {
          username: '',
          password: '',
      
        },
        rules: {
           username: {
              required:true,message:"用户名不可为空", trigger:'blur'
          },
          password:{
              required:true,message:"密码不可为空",trigger:'blur'
          }
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             var login_url = "http://127.0.0.1:3000/api/userlogin"
              this.LoginForm
              this.$http.post(login_url,this.LoginForm).then(
                res=>{
                    if(res.status == 200){
                      console.log(res);
                        localStorage.setItem("userData",JSON.stringify(res.data.list))
                    }
                    this.$router.push("/")
                }
              )

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style scoped>

</style>